﻿.example {
    margin: 2em 0;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
}

.example-demo {
    margin: 1em;
    padding: 0;
}

.example-tools {
    text-align: center;
}

.example ::deep .snippet {
    border-top: 1px solid rgba(0, 0, 0, .12);
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.example.example-hide-example ::deep .snippet {
    border: none;
    border-radius: 12px;
}

.example.example-code-fix ::deep .snippet {
    border-radius: 0 0 12px 12px;
    border-top: 1px solid rgba(0, 0, 0, .12);
    border-bottom: none;
}

#p-g .example-demo ::deep .mdui-row>.mdui-col {
    background-color: #e8eaf6;
    border: 1px solid #c5cae9;
    padding-bottom: 10px;
    padding-top: 10px;
}

.mdui-theme-layout-dark .example,
.mdui-theme-layout-dark .example ::deep .snippet {
    border-color: hsla(0, 0%, 100%, .12) !important;
}

@media(prefers-color-scheme: dark) {
    .mdui-theme-layout-auto .example,
    .mdui-theme-layout-auto .example ::deep .snippet {
        border-color: hsla(0, 0%, 100%, .12) !important;
    }
}

.mdui-theme-layout-dark #p-g .example-demo ::deep .mdui-row>.mdui-col {
    background-color: #424242;
    border-color: #757575;
}

@media(prefers-color-scheme: dark) {
    .mdui-theme-layout-auto #p-g .example-demo ::deep .mdui-row>.mdui-col {
        background-color: #424242;
        border-color: #757575;
    }
}